<template>
	<view class="content">
		<view style="position: sticky;top: 0;background:#f4f3f3;z-index: 99;">
			<uni-search-bar radius="100" placeholder="请搜索商品" v-model="filterData.kw" cancelButton="none" bgColor="#fff"
				@confirm="handleSearch" @clear="handleSearch"/>
			<view class="product-list-sort">
				<view class="sort-item" :class="{active:currentSort === 1}" @click="handleChangeSort(1)">综合排序
				</view>
				<view class="sort-item" :class="{active:[2,3].includes(currentSort)}" @click="handleChangeSort(2)">
					按价格
					<view class="price-sort">
						<uni-icons type="up" :color="currentSort === 2?'#f73a3a':'#333333'"></uni-icons>
						<uni-icons type="down" :color="currentSort === 3?'#f73a3a':'#333333'"></uni-icons>
					</view>
				</view>
				<view class="sort-item" :class="{active:currentSort === 4}" @click="handleChangeSort(4)">按销量
				</view>
				<view class="sort-item" @click="handleOpenFilterDrawer">筛选</view>
			</view>
			<uni-drawer ref="filterDrawerRef" mode="right" class="filter-drawer">
				<scroll-view class="filter-view" scroll-y="true">
					<uni-section title="分类">
						<view class="filter-section-wrap">
							<uni-row :gutter="12">
								<uni-col :span="8">
									<view class="filter-item-btn" :class="{active:filterData.type === undefined}"
										@click="handleClickFilterItem('type',undefined)">
										全部
									</view>
								</uni-col>
								<uni-col :span="8" v-for="item in flowerTypeList" :key="item.id">
									<view class="filter-item-btn" :class="{active:filterData.type === item.id}"
										@click="handleClickFilterItem('type',item.id)">
										{{ item.name  }}
									</view>
								</uni-col>
							</uni-row>
						</view>
					</uni-section>

					<uni-section title="花材">
						<view class="filter-section-wrap">
							<uni-row :gutter="12">
								<uni-col :span="8">
									<view class="filter-item-btn" :class="{active:filterData.material === undefined}"
										@click="handleClickFilterItem('material',undefined)">
										全部
									</view>
								</uni-col>
								<uni-col :span="8" v-for="item in FlowerMaterial" :key="item.value">
									<view class="filter-item-btn" :class="{active:filterData.material === item.value}"
										@click="handleClickFilterItem('material',item.value)">
										{{ item.label  }}
									</view>
								</uni-col>
							</uni-row>
						</view>
					</uni-section>

					<uni-section title="对象">
						<view class="filter-section-wrap">
							<uni-row :gutter="12">
								<uni-col :span="8">
									<view class="filter-item-btn" :class="{active:filterData.receiver === undefined}"
										@click="handleClickFilterItem('receiver',undefined)">
										全部
									</view>
								</uni-col>
								<uni-col :span="8" v-for="item in FlowerReceiver" :key="item.value">
									<view class="filter-item-btn" :class="{active:filterData.receiver === item.value}"
										@click="handleClickFilterItem('receiver',item.value)">
										{{ item.label }}
									</view>
								</uni-col>
							</uni-row>
						</view>
					</uni-section>

					<uni-section title="场合">
						<view class="filter-section-wrap">
							<uni-row :gutter="12">
								<uni-col :span="8">
									<view class="filter-item-btn" :class="{active:filterData.occasion === undefined}"
										@click="handleClickFilterItem('occasion',undefined)">
										全部
									</view>
								</uni-col>
								<uni-col :span="8" v-for="item in FlowerOccasion" :key="item.value">
									<view class="filter-item-btn" :class="{active:filterData.occasion === item.value}"
										@click="handleClickFilterItem('occasion',item.value)">
										{{ item.label }}
									</view>
								</uni-col>
							</uni-row>
						</view>
					</uni-section>

					<uni-section title="枝数">
						<view class="filter-section-wrap">
							<uni-row :gutter="12">
								<uni-col :span="8">
									<view class="filter-item-btn" :class="{active:filterData.size === undefined}"
										@click="handleClickFilterItem('size',undefined)">
										全部
									</view>
								</uni-col>
								<uni-col :span="8" v-for="item in FlowerSize" :key="item.value">
									<view class="filter-item-btn" :class="{active:filterData.size === item.value}"
										@click="handleClickFilterItem('size',item.value)">
										{{ item.label }}
									</view>
								</uni-col>
							</uni-row>
						</view>
					</uni-section>
				</scroll-view>
				<view class="btn-group">
					<button class="cancel" hover-class="is-hover" @click="handleResetFilter">重置</button>
					<button class="confirm" hover-class="is-hover" @click="handleConfirmFilter">确定</button>
				</view>
			</uni-drawer>
		</view>
		<view class="product-list">
			<uni-row :gutter="24">
				<uni-col :span="12" v-for="item in productList" :key="item.id" style="padding: 12px;">
					<view class="product-list-item" @click="toProductDetail(item.id)">
						<image :src="getCover(item.images)" class="cover" mode="aspectFill"></image>
						<view>
							<view class="name">{{ item.name }}</view>
							<view class="price">{{ `￥${item.price}` }}</view>
						</view>
					</view>
				</uni-col>
			</uni-row>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
	import {
		onLoad,
		onReachBottom
	} from "@dcloudio/uni-app"
	import {
		FlowerMaterial,
		FlowerReceiver,
		FlowerOccasion,
		FlowerSize
	} from "@/constants/index.js"
	import {
		SERVER_URL
	} from "@/config/index.js"

	const currentSort = ref(1)

	const handleChangeSort = (e) => {
		if (e === 2 && currentSort.value === 2) {
			currentSort.value = 3
		} else {
			currentSort.value = e
		}

		state.page = 0
		productList.value = []
		loadProduct()
	}

	const filterDrawerRef = ref()

	const handleOpenFilterDrawer = () => {
		filterDrawerRef.value.open()
	}

	const flowerTypeList = ref([])

	const loadFlowerType = () => {
		uni.request({
			url: SERVER_URL + '/flower/type/all',
			method: "GET",
			success: (res) => {
				if (res.statusCode === 200) {
					flowerTypeList.value = res.data

				}
			},
		})
	}

	const filterData = reactive({
		kw: undefined,
		type: undefined,
		material: undefined,
		receiver: undefined,
		occasion: undefined,
		size: undefined
	})

	const handleSearch = (e) => {
		if (e.value.trim()) {
			filterData.kw = e.value.trim()
		} else {
			filterData.kw = undefined
		}

		state.page = 0
		productList.value = []
		loadProduct()
	}

	const handleClickFilterItem = (type, value) => {
		switch (type) {
			case "type":
				filterData.type = value
				return;
			case "material":
				filterData.material = value
				return;
			case "receiver":
				filterData.receiver = value
				return;
			case "occasion":
				filterData.occasion = value
				return;
			case "size":
				filterData.size = value
				return;
			default:
				return
		}
	}

	const handleResetFilter = () => {
		filterDrawerRef.value.close()
		filterData.type = undefined
		filterData.material = undefined
		filterData.receiver = undefined
		filterData.occasion = undefined
		filterData.size = undefined

		state.page = 0
		productList.value = []
		loadProduct()
	}

	const handleConfirmFilter = () => {
		filterDrawerRef.value.close()

		console.log(filterData)

		state.page = 0
		productList.value = []
		loadProduct()
	}

	const toNumber = (val) => {
		if (isNaN(Number(val))) return undefined
		return Number(val)
	}

	const state = reactive({
		total: 0,
		page: 0,
		pageSize: 20
	})

	const productList = ref([])

	const getCover = (images) => {
		if (images && images.length > 0) {
			return SERVER_URL + images[0]
		}

		return "/static/images/flower.png"
	}

	// 加载产品
	const loadProduct = () => {
		uni.showLoading()

		state.page += 1

		const data = {
			page: state.page,
			page_size: state.pageSize,
			sort: currentSort.value
		}

		if (filterData.kw) data.kw = filterData.kw
		if (filterData.type !== undefined) data.type = filterData.type
		if (filterData.material !== undefined) data.material = filterData.material
		if (filterData.receiver !== undefined) data.receiver = filterData.receiver
		if (filterData.occasion !== undefined) data.occasion = filterData.occasion
		if (filterData.size !== undefined) data.size = filterData.size

		uni.request({
			url: SERVER_URL + '/flower/list',
			method: "GET",
			data,
			success: (res) => {
				if (res.statusCode === 200) {
					state.page = res.data.page
					state.total = res.data.total
					productList.value = [...productList.value, ...res.data.data]
				} else {
					state.page -= 1
				}
				console.log(res.data);
			},
			fail: (err) => {
				state.page -= 1
				console.log(err)
			},
			complete: () => {
				uni.hideLoading()
			}
		});
	}

	const toProductDetail = (id) => {
		uni.navigateTo({
			url: "/pages/flower/flower?id=" + id
		})
	}

	onReachBottom(() => {
		if (state.total > (state.page * state.pageSize)) {
			loadProduct()
		}
	})

	onLoad((e) => {
		filterData.kw = e.kw ?? undefined
		filterData.type = toNumber(e.type)
		filterData.material = toNumber(e.material)
		filterData.receiver = toNumber(e.receiver)
		filterData.occasion = toNumber(e.occasion)
		filterData.size = toNumber(e.size)
		loadFlowerType()

		loadProduct()
	})
</script>

<style scoped lang="scss">
	.content {
		min-height: 100vh;
		background: #f4f3f3;
		display: flex;
		flex-direction: column;

		.filter-drawer {
			:deep(.uni-drawer__content) {
				width: 80vw !important;
				max-width: 280px;
			}

			.filter-view {
				height: calc(100% - 64px);

				.filter-section-wrap {
					padding: 0 10px;

					.filter-item-btn {
						text-align: center;
						background-color: #f8f8f8;
						margin-bottom: 12px;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						padding: 8px 12px;
					}

					.active {
						color: #fff;
						background-color: #ff3f35;
					}
				}
			}

			.btn-group {
				display: flex;
				align-items: center;
				// gap: 10px;
				padding: 0 10px;
				height: 64px;

				button {
					flex: 1;
					color: #ffffff;
					border-radius: 0;
				}

				.cancel {
					background-color: #c8c8c8;
					border-color: #c8c8c8;
				}

				.cancel.is-hover {
					background-color: #aaaaaa;
				}

				.confirm {
					background-color: #e51c23;
					border-color: #e51c23;
				}

				.confirm.is-hover {
					background-color: #c3181e;
				}
			}
		}

		.product-list-sort {
			display: flex;
			height: 3rem;
			line-height: 3rem;
			background: #fff;

			.sort-item {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.price-sort {
				margin-left: 2px;
				display: flex;
				flex-direction: column;
				line-height: 8px;
				justify-content: center;
				align-items: center;

				.active {
					color: red;
				}
			}

			.sort-item.active {
				color: #f73a3a;
			}

		}

		.product-list {
			padding: 24px 12px;

			.product-list-item {
				background-color: #fff;
				margin-bottom: 12px;
				border-radius: 6px;
				overflow: hidden;

				.cover {
					width: 100%;
					height: 200px;
				}

				.name {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					text-align: center;
					font-size: 1rem;
					line-height: 2rem;
					padding: 0 1rem;
				}

				.price {
					text-align: center;
					font-size: 1.2rem;
					line-height: 2rem;
					color: #f73a3a;
				}
			}
		}
	}
</style>